<template>
  <div class="category">
    <div class="search">
      <SearchBox class="innerBox" type="text" innerText="搜索商品，共30000件好物" @click="toSearch"></SearchBox>
    </div>
    <div class="categoryMain">
      <div class="mianLeft">
        <div class="leftItem" v-for="(item, index) in category.categoryList.categoryL1List" :key="item.id"
          @click="changeList(item.id)">
          {{ item.name }}
        </div>
      </div>

      <div class="mainRight active">
        <div class="mainContent">
          <div class="mianTop">
            <img class="mianImg" src="../../assets/images/dao.jpg" alt="" />
          </div>
          <div v-for="item in category.categoryItem.categoryGroupList" :key="item.id">
            <div class="mainText">{{ item.name }}</div>
            <div class="main">
              <div class="mainItem" v-for="c1 in item.categoryList" :key="c1.id" @click="gotoItemlist(c1.id)">
                <img class="itemImg" :src="c1.wapBannerUrl" alt="" />
                <div class="itemText">{{ c1.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "Category",

});

</script>
<script lang="ts" setup>
import SearchBox from '@/components/searchBox/index.vue'
import { categoryStore } from "@/stores/category";
// import router from "@/router";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
const category = categoryStore();
const { category1Id, categoryItem } = storeToRefs(category)
const cateParams = ref({
  __timestamp: "1680742031022",
  categoryId: "",
});
onMounted(() => {
  category.getCategoryList(cateParams.value);
  category.getCategoryItem();
});
const categoryItemImg = computed(() => {
  return categoryItem.currentCategory?.bannerUrl
})
// 二级信息获取
const changeList = (id: number) => {
  category1Id.value = id
  category.getCategoryItem(id)
}

//跳转去分类
const router = useRouter()
const gotoItemlist = (id: number) => {
  // console.log('id2', id);

  router.push(`/categoryItem?catgory2Id=${id}`)
}

// 跳转到search
const toSearch = () => {
  router.push('/search')
}
</script>

<style lang="less" scoped>
.category {
  height: 100%;
}

.category .search {
  width: 100%;
  height: 44px;
  border-bottom: 2px solid #aaa;
  background-color: #ffffff;
  position: fixed;
  z-index: 999;
}

.categoryMain {
  display: flex;
}

.categoryMain .mianLeft {
  width: 81px;
  position: fixed;
  margin-top: 30px;
  height: 100%;
  border-right: 1px solid #aaa
}

.categoryMain .mianLeft .leftItem {
  width: 81px;
  height: 25px;
  font-size: 14px;
  text-align: center;
  line-height: 25px;
  margin-top: 20px;
}

.mainRight {
  flex: 1;
  border-left: 1px solid #aaa;
  box-sizing: border-box;
  position: relative;
  margin-left: 81px;
}

.mainRight .mainContent {
  margin-left: 20px;
}

.mainRight .mainContent .mianTop {
  margin-top: 60px;
}

.mainRight .mainContent .mianTop .mianImg {
  width: 264px;
  height: 96px;
}

.mainRight .mainContent .mainText {
  margin: 10px 0;
  font-size: 14px;
  font-weight: 700;
}

.mainRight .mainContent .main {
  margin-right: 10px;
  border-top: 1px solid #aaa;
  display: flex;
  flex-wrap: wrap;
}

.mainRight .mainContent .mainItem {
  width: 33.3333%;
  height: 108px;
}

.mainRight .mainContent .mainItem .itemText {
  font-size: 14px;
  width: 72px;
  height: 36px;
  text-align: center;
}

.mainRight .mainContent .mainItem .itemImg {
  width: 72px;
  height: 72px;
}

:deep(.innerBox) {
  .inner-text {
    width: 355px;
    border-radius: 5px;
    padding-left: 10px;
    box-sizing: border-box;
    translate: 0 5px;
  }

}
</style>
